<template>
  <el-scrollbar class="section_con">
    <div class="down_header">
      <p class="title">
        {{ form.assessmentTitle }}
      </p>
      <p class="sub_title">召开时间：{{ form.startTime }} ~ {{ form.endTime }}</p>
    </div>
    <div class="down_body">
      <el-row>
        <!-- <el-col :span="12">
          <p class="title">签到二维码</p>
          <p class="sub_title">
            (参会人使用微信扫码签到。签到时间：{{ form.startTime }} ~
            {{ form.endTime }})
          </p>
          <div class="erWeiMa">
            <div class="qrcode" ref="qrCodeUrl"></div>
            <p>动态二维码</p>
          </div>
        </el-col> -->
        <el-col :span="24">
          <p class="title">投票二维码</p>
          <p class="sub_title">参会人使用微信扫码投票。</p>
          <div class="erWeiMa">
            <div class="qrcode" ref="qrCodeUrl1"></div>
            <p>投票二维码</p>
          </div>
        </el-col>
      </el-row>
      <div class="body_title">
        <div>
          <span class="big_title">设置参加本次民主测评会人员</span>
          <span>（设置发布后， 系统会根据参会人员数量生成对应数量的投票随机码）</span>
        </div>
      </div>
      <el-tabs v-model="tabsActiveName" @tab-click="handleClick">
        <el-tab-pane :label="'应投票（' + form.shouldVote.length + '）'" name="1"></el-tab-pane>
        <el-tab-pane :label="'已投票（' + form.voteed.length + '）'" name="2"></el-tab-pane>
        <el-tab-pane :label="'未投票（' + form.noVote.length + '）'" name="3"></el-tab-pane>
      </el-tabs>
      <vxe-table
        class="mytable-scrollbar"
        border
        stripe
        max-height="500px"
        row-id="id"
        size="medium"
        resizable
        :scroll-y="{ enabled: false }"
        :data="tableData"
        :header-cell-class-name="headerStyle"
        :row-class-name="rowClass"
        highlight-hover-row>
        <vxe-column type="seq" title="序号" width="100" align="center" fixed="left"></vxe-column>
        <vxe-column field="randomCode" title="随机码" align="center" min-width="200"></vxe-column>
        <vxe-column field="isProcessed" title="是否已投票" align="center" min-width="200">
          <template #default="{ row }">
            <span>
              {{ row.isProcessed == 1 ? '已投票' : '未投票' }}
            </span>
          </template>
        </vxe-column>
        <vxe-column field="voteTime" title="投票时间" align="center" min-width="200"></vxe-column>
      </vxe-table>
    </div>
  </el-scrollbar>
</template>

<script>
import { getAssessmentVoteDetail, getSignUrl, downQrcode } from '@apis/mzEvaluation.js'
import QRCode from 'qrcodejs2'
export default {
  name: 'EvaluationDownload',
  data() {
    return {
      tableData: [],
      checkResult: [],
      date1: '',
      date2: '',
      tabsActiveName: '1',
      id: this.$route.query.id || '',
      form: {
        shouldVote: [],
        voteed: [],
        noVote: [],
      },
      signUrl: '',
      timer: null,
    }
  },
  watch: {
    '$route.query': {
      handler(obj) {
        if (obj && obj.id) {
          this.id = obj.id
          this.initdata()
        }
      },
      deep: true,
    },
  },
  created() {
    this.initdata()
  },
  beforeDestroy() {
    clearInterval(this.timer)
  },
  methods: {
    /* 导出 */
    onExport() {
      const imgEle = this.$refs.qrCodeUrl1.getElementsByTagName('img')[0]
      let imgSrc = ''
      if (imgEle.currentSrc) {
        imgSrc = imgEle.currentSrc.replace('data:image/png;base64,', '')
      } else {
        imgSrc = imgEle.src.replace('data:image/png;base64,', '')
      }
      downQrcode(
        {
          assessmentId: this.id,
          base64Str: imgSrc,
        },
        { responseType: 'blob' }
      ).then(res => {
        // const data = res.data
        if (res.status === 500) {
          return false
        }
        const blob = new Blob([res], {
          type: 'application/msword;charset=utf-8',
        })
        const filename = `${this.form.createByOrgName}${this.form.assessmentSecondTitle}民主测评会.docx`
        /* 判断ie 是否兼容 */
        if (window.navigator.msSaveOrOpenBlob) {
          navigator.msSaveBlob(blob, filename)
        } else {
          const a = document.createElement('a')
          const url = window.URL.createObjectURL(blob)
          a.href = url
          a.download = filename
          const body = document.getElementsByTagName('body')[0]
          body.appendChild(a)
          a.click()
          body.removeChild(a)
          window.URL.revokeObjectURL(url)
        }
      })
    },
    /* 初始化数据 */
    initdata() {
      getAssessmentVoteDetail({
        id: this.id,
        signUrl: config.signUrl,
        voteUrl: config.voteUrl,
        signErrorUrl: config.signErrorUrl,
      }).then(res => {
        const data = res.data
        this.form = { ...data }
        this.tableData = [...this.form.shouldVote]
        this.creatQrCode1()
      })
    },
    // 投票二维码
    creatQrCode1() {
      this.$refs.qrCodeUrl1.innerHTML = ''
      if (!this.$refs.qrCodeUrl1) return
      const qrcode1 = new QRCode(this.$refs.qrCodeUrl1, {
        text: this.form.voteUrl, // 需要转换为二维码的内容
        width: 150,
        height: 150,
        colorDark: '#000000',
        colorLight: '#ffffff',
        correctLevel: QRCode.CorrectLevel.H,
      })
      qrcode1._el.title = ''
    },
    // 生成动态签到码
    getSignUrl() {
      if (!this.$refs.qrCodeUrl) return
      getSignUrl({
        id: this.id,
        signUrl: config.signUrl,
        voteUrl: config.voteUrl,
        signErrorUrl: config.signErrorUrl,
      }).then(res => {
        const data = res.data
        this.$refs.qrCodeUrl.innerHTML = ''
        this.creatQrCode(data)
      })
    },
    // 生成二维码
    creatQrCode(data) {
      const qrcode = new QRCode(this.$refs.qrCodeUrl, {
        text: `${config.ip}/topnet-assess${data}`, // 需要转换为二维码的内容
        width: 150,
        height: 150,
        colorDark: '#000000',
        colorLight: '#ffffff',
        correctLevel: QRCode.CorrectLevel.H,
      })
      qrcode._el.title = ''
    },
    handleClick(e) {
      this.tabsActiveName = e.name
      switch (this.tabsActiveName) {
        case '1':
          this.tableData = [...this.form.shouldVote]
          break
        case '2':
          this.tableData = [...this.form.voteed]
          break
        case '3':
          this.tableData = [...this.form.noVote]
          break

        default:
          break
      }
    },
    /* 头部样式 */
    headerStyle({ row, column, rowIndex, columnIndex }) {
      return 'headerStyle'
    },
    rowClass({ row, rowIndex }) {
      return 'rowClass'
    },
  },
}
</script>

<style lang="scss" scoped>
.section_con {
  height: 100%;
  background-color: #fff;
  font-size: 14px;
  .down_header {
    text-align: center;
    margin-bottom: 30px;
    .title {
      font-weight: 600;
      font-size: 22px;
      color: #333;
      margin-bottom: 10px;
    }
    .sub_title {
      color: #666;
    }
  }
  .down_body {
    width: 99%;
    .el-row {
      .title {
        text-align: center;
        font-weight: 600;
        font-size: 16px;
        color: #333;
        margin-bottom: 5px;
      }
      .sub_title {
        text-align: center;
        color: #666;
      }
      .el-col {
        padding-left: 30px;
        padding-bottom: 10px;
        &:not(:last-of-type) {
          border-right: 1px solid #d7d7d7;
        }
      }
    }
    .body_title {
      border-top: 1px solid #d7d7d7;
      margin-top: 22px;
      padding: 20px 0 15px;
      color: #999;
      display: flex;
      justify-content: space-between;
      align-items: center;
      .big_title {
        color: #333;
        margin-right: 20px;
      }
    }
    .erWeiMa {
      text-align: center;
      margin-top: 20px;
      .qrcode {
        display: flex;
        align-items: center;
        justify-content: center;
      }
      p {
        margin-top: 12px;
        font-size: 14px;
        color: #333;
      }
    }
    /deep/.el-tabs__nav-wrap::after {
      background-color: transparent;
    }
    /deep/.el-tabs__item.is-active {
      color: #2261b9;
    }
    /deep/.el-tabs__active-bar {
      background-color: #2261b9;
    }
  }
}
/deep/.headerStyle {
  color: #333;
  border-left: 1px solid #eee;

  th,
  div,
  span,
  p {
    font-size: 14px;
  }
}

/deep/.rowClass {
  td,
  div,
  span,
  p {
    font-size: 14px;
  }
}
</style>
